<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局API-Vue Directive</title>
    <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
    <script src="../../../assets/js/vue-2.5.6.js"></script>
</head>

<body>
    <div id="app">
        <div v-jspang="color" id="demo">
            {{ num }}
        </div>
        <div>
            <button @click="add">Add</button>
        </div>
    </div>
</body>

<script>
    Vue.directive('jspang', {
        bind: function(el, binding, vnode) { //被绑定
            /**
                        var s=JSON.stringify;
                        el.innerHTML = 
                            'name:'        + s(binding.name) +'<br>' + 
                            'value:'       + s(binding.value) +'<br>' + 
                            'expression:'  + s(binding.expression) +'<br>' ;
                **/
            el.style = 'color:' + binding.value;
        },
        inserted: function() { //绑定到节点
            console.log('2 - inserted');
        },
        update: function() { //组件更新
            console.log('3 - update');
        },
        componentUpdated: function() { //组件更新完成
            console.log('4 - componentUpdated');
        },
        unbind: function() { //解绑
            console.log('1 - bind');
        }
    });

    var app = new Vue({
        el: "#app",
        data: {
            num: 0,
            color: "red",
        },
        methods: {
            add: function() {
                this.num++;
            }
        }

    });
</script>

</html>